<template>
    <div class="cneter-vue">
        <div class="title">热销推荐</div>
        <ul>
            <li class="item"  v-for="list in listCon" :key="list.key">
                    <img class="item-img" :src="list.imgsrc">
                    <div class="item-info">
                        <p class="item-title"><strong>{{list.p_1}}</strong></p>
                        <p class="item-desc">{{list.p_2}}</p>
                        <button class="item-button">{{list.item_detail}}</button>
                    </div>
            </li>
        </ul>
        <div class="clickMore" @click="btnClick" v-show="clickMore">点击加载更多</div>
    </div>
</template>

<script>
export default {
    name: "HomeRecommend",
    props:["index"],
    data() {
        return {
            listCon:'',
            // 列表显示的信息数，为5条
            indexLength:5,
            // 点击加载按钮的显示和隐藏，如果上面的数据显示的条数超出5条，那么就显示点击加载更过，反之，不显示
            clickMore:true,
            lists: [{
                key:"0001",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋海世界",
                p_2: "大连海洋海世界大连海洋海世界",
                item_detail:"查看详情",
            },
            {
                key:"0002",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋海世界",
                p_2: "大连海洋海世界大连海洋海世界",
                item_detail:"查看详情",
            },
            {
                key:"0003",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋海世界",
                p_2: "大连海洋海世界大连海洋海世界",
                item_detail:"查看详情",
            },
            {
                key:"0004",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋海世界",
                p_2: "大连海洋海世界大连海洋海世界",
                item_detail:"查看详情",
            },
            {
                key:"0005",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋海世界",
                p_2: "大连海洋海世界大连海洋海世界",
                item_detail:"查看详情",
            },
            {
                key:"0006",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋大连海洋海世界大连海洋海世界海世界",
                p_2: "大连海洋海世界大连海洋海世界",
                item_detail:"查看详情",
            },
            {
                key:"0007",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋大连海洋海世界大连海洋海世界海世界",
                p_2: "大连海洋海世界大连海洋海世界",
                item_detail:"查看详情",
            }],
        }
    },
    methods: {
        btnClick() {
            console.log("testss",this.lists)
            this.indexLength = this.indexLength+5;
            this.listCon = this.lists.splice(0,this.indexLength);
            console.log("test",this.indexLength);
        },
    },
    created() {
         // 判断列表的项数，如果多余6项的话则显示点击加载更过的按钮，否则则隐藏
        if(this.lists.length>5){
            this.listCon = this.lists.splice(0,this.indexLength)
            this.clickMore = true;
        }else{
            this.clickMore = false;
        }
    },
    // computed:{
    //     lists() {
    //         return this.lists = this.lists.splice(0,this.indexLength)
    //     }
    // },

}
</script>

<style scoped>
    p{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .title{
        line-height: 30px;
        background-color: #eee;
        text-indent: 2rem;
    }
    .item{
        display: flex;
        overflow: hidden;
        height: 5rem;
        border-bottom: 2px solid #ccc;
        font-size: 1.3em;
    }
    .item-img{
        width: 4rem;
        height: 4rem;
        padding: .3rem;
    }
    .item-info{
        margin-top: 0.2rem;
    }
    .item-desc{
        margin-top: .4rem;
        color: rgb(58, 75, 68);
        font-size: 0.9rem;
    }
    .item-button{
        background-color: rgb(184, 52, 43);
        margin-top: .4rem;
        width: 5rem;
        height: 1.3rem;
    }
    .clickMore{
        height: 1.3rem;
        width: 100%;
        text-align: center;
        line-height: 1.1rem;
        color: rgb(190, 104, 46);
        background-color: #ccc;
        padding:1px solid #eee;
    }
    .cneter-vue {
        padding-bottom:1rem;
    }
</style>
